<template>
  <div id="app">
    <router-link to="/about">about</router-link> &nbsp;
    <router-link to="/">home</router-link>&nbsp;
    <router-link to="/slot">插槽</router-link> &nbsp;
    <router-link to="/indexDB">indexDb</router-link>&nbsp;
    <button @click="compNbr++">Next component</button>
    <!-- <KeepAlive include="HelloWorld,slot">
      <component :is="activeComp"></component>
    </KeepAlive> -->
    <router-view>

    </router-view>
  </div>

</template>
<script lang="ts" setup>
import HelloWorld from './components/HelloWorld.vue'
import slot from './view/slot.vue'
import about from './components/about.vue'
const compNbr = ref(1)
watch(compNbr, () => {
  if (compNbr.value > 3) {
    compNbr.value = 1
  }
})
const activeComp = computed(() => {
  if (compNbr.value == 1) {
    return slot
  } else if (compNbr.value == 2) {
    return HelloWorld
  } else if (compNbr.value == 3) {
    return about
  }

})
</script>
<style lang="scss" scoped>
#app {
  margin: 100px auto;
  text-align: center;
}
</style>
